<!--
  智慧小区管理系统 - 分页组件
  @author Wu.Liang
  @date 2024-01-01
-->
<template>
    <div class="pagination-container" v-if="total > 0">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :total="total"
            :page-sizes="pageSizes" :layout="layout" :background="background" :small="small" :disabled="disabled"
            :hide-on-single-page="hideOnSinglePage" :pager-count="pagerCount" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" @prev-click="handlePrevClick" @next-click="handleNextClick" />
    </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

// Props定义
interface Props {
    total: number
    currentPage?: number
    pageSize?: number
    pageSizes?: number[]
    layout?: string
    background?: boolean
    small?: boolean
    disabled?: boolean
    hideOnSinglePage?: boolean
    pagerCount?: number
}

const props = withDefaults(defineProps<Props>(), {
    currentPage: 1,
    pageSize: 10,
    pageSizes: () => [10, 20, 50, 100],
    layout: 'total, sizes, prev, pager, next, jumper',
    background: true,
    small: false,
    disabled: false,
    hideOnSinglePage: false,
    pagerCount: 7
})

// Emits定义
const emit = defineEmits<{
    'update:currentPage': [page: number]
    'update:pageSize': [size: number]
    'size-change': [size: number]
    'current-change': [page: number]
    'prev-click': [page: number]
    'next-click': [page: number]
}>()

// 响应式数据
const currentPage = ref(props.currentPage)
const pageSize = ref(props.pageSize)

// 计算属性
const totalPages = computed(() => Math.ceil(props.total / pageSize.value))

// 监听props变化
watch(
    () => props.currentPage,
    (val) => {
        currentPage.value = val
    }
)

watch(
    () => props.pageSize,
    (val) => {
        pageSize.value = val
    }
)

// 处理页大小变化
const handleSizeChange = (size: number) => {
    pageSize.value = size
    emit('update:pageSize', size)
    emit('size-change', size)
}

// 处理页码变化
const handleCurrentChange = (page: number) => {
    currentPage.value = page
    emit('update:currentPage', page)
    emit('current-change', page)
}

// 处理上一页点击
const handlePrevClick = (page: number) => {
    emit('prev-click', page)
}

// 处理下一页点击
const handleNextClick = (page: number) => {
    emit('next-click', page)
}

// 暴露数据
defineExpose({
    currentPage,
    pageSize,
    totalPages
})
</script>

<style scoped lang="scss">
.pagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 16px 0;

    :deep(.el-pagination) {
        --el-pagination-font-size: 14px;
        --el-pagination-bg-color: #fff;
        --el-pagination-text-color: #606266;
        --el-pagination-border-radius: 4px;
        --el-pagination-button-color: #2d8cf0;
        --el-pagination-button-bg-color: #f5f7fa;
        --el-pagination-button-disabled-color: #c0c4cc;
        --el-pagination-button-disabled-bg-color: #fff;
        --el-pagination-hover-color: #1c6dd0;

        .el-pagination__total {
            color: #909399;
            font-weight: normal;
        }

        .el-pagination__sizes {
            .el-select {
                .el-input {
                    .el-input__wrapper {
                        background-color: #f5f7fa;
                    }
                }
            }
        }

        .el-pager {
            li {
                background-color: var(--el-pagination-button-bg-color);
                color: var(--el-pagination-text-color);
                border-radius: var(--el-pagination-border-radius);
                margin: 0 2px;

                &:hover {
                    color: var(--el-pagination-hover-color);
                }

                &.is-active {
                    background-color: var(--el-pagination-button-color);
                    color: #fff;
                }

                &.is-disabled {
                    color: var(--el-pagination-button-disabled-color);
                    background-color: var(--el-pagination-button-disabled-bg-color);
                }
            }
        }

        .btn-prev,
        .btn-next {
            background-color: var(--el-pagination-button-bg-color);
            color: var(--el-pagination-text-color);
            border-radius: var(--el-pagination-border-radius);

            &:hover {
                color: var(--el-pagination-hover-color);
            }

            &:disabled {
                color: var(--el-pagination-button-disabled-color);
                background-color: var(--el-pagination-button-disabled-bg-color);
            }
        }

        .el-pagination__jump {
            color: #909399;

            .el-input {
                .el-input__wrapper {
                    background-color: #f5f7fa;
                }
            }
        }
    }
}

// 响应式适配
@media (max-width: 768px) {
    .pagination-container {
        justify-content: center;
        padding: 12px 0;

        :deep(.el-pagination) {
            --el-pagination-font-size: 12px;

            .el-pagination__total,
            .el-pagination__jump {
                display: none;
            }

            .el-pagination__sizes {
                margin-right: 8px;
            }
        }
    }
}

@media (max-width: 480px) {
    .pagination-container {
        :deep(.el-pagination) {
            .el-pagination__sizes {
                display: none;
            }
        }
    }
}
</style>
